{% extends "index_base.html" %}
{% block content %}
{%load enconvertch %}
<script src="/site_media/js/jquery.form.js"></script>
<style type="text/css">
<!--
body {
	background: #e9e9e9;
	margin: 0px;
	padding: 0px;
	color: #FFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.4;
}

/* ~~ 元素/标签选择器 ~~ */
ul, ol, dl { /* 由于浏览器之间的差异，最佳做法是在列表中将填充和边距都设置为零。为了保持一致，您可以在此处指定需要的数值，也可以在列表所包含的列表项（LI、DT 和 DD）中指定需要的数值。请注意，除非编写一个更为具体的选择器，否则您在此处进行的设置将会层叠到 .nav 列表。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 删除上边距可以解决边距会超出其包含的 div 的问题。剩余的下边距可以使 div 与后面的任何元素保持一定距离。 */
	padding-right: 15px;
	padding-left: 15px; /* 向 div 内的元素侧边（而不是 div 自身）添加填充可避免使用任何方框模型数学。此外，也可将具有侧边填充的嵌套 div 用作替代方法。 */
	text-align: left;
	color: #000;
	font-weight: bold;
	font-size: 12px;
}
a img { /* 此选择器将删除某些浏览器中显示在图像周围的默认蓝色边框（当该图像包含在链接中时） */
	border: none;
}

/* ~~ 站点链接的样式必须保持此顺序，包括用于创建悬停效果的选择器组在内。 ~~ */
a:link {
	color:#71D56E;
	text-decoration: underline; /* 除非将链接设置成极为独特的外观样式，否则最好提供下划线，以便可从视觉上快速识别 */
}
a:visited {
	color: #C3D56E;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* 此组选择器将为键盘导航者提供与鼠标使用者相同的悬停体验。 */
	text-decoration: none;
}

/* ~~ 此容器包含所有其它 div，并依百分比设定其宽度 ~~ */
.container {
	width: 95%;
	#max-width: 1260px;/* 可能需要最大宽度，以防止此布局在大型显示器上过宽。这将使行长度更便于阅读。IE6 不遵循此声明。 */
	#min-width: 780px;/* 可能需要最小宽度，以防止此布局过窄。这将使侧面列中的行长度更便于阅读。IE6 不遵循此声明。 */
	background: #FFF;
	margin: 0 auto; /* 侧边的自动值与宽度结合使用，可以将布局居中对齐。如果将 .container 宽度设置为 100%，则不需要此设置。 */
}

/* ~~ 标题未指定宽度。它将扩展到布局的完整宽度。标题包含一个图像占位符，该占位符应替换为您自己的链接徽标 ~~ */
.header {
	background-color: #2E4457;
	height:70px;
	padding-left:30px;
	padding-top:5px;		
}
.header2 {
	background-color:#999999;
	height:6px;
}

.sidebar1 {
	float: left;
	width: 20%;
	background: #fff;
	padding-bottom: 10px;
}
.content {
	padding: 10px 0;
	width: 80%;
	float: left;
	text-align: center;
}

/* ~~ 此分组的选择器为 .content 区域中的列表提供了空间 ~~ */
.content ul, .content ol { 
	padding: 0 10px 10px 10px; /* 此填充反映上述标题和段落规则中的右填充。填充放置于下方可用于间隔列表中其它元素，置于左侧可用于创建缩进。您可以根据需要进行调整。 */
}

/* ~~ 导航列表样式（如果选择使用预先创建的 Spry 等弹出菜单，则可以删除此样式） ~~ */
ul.nav {
	list-style: none; /* 这将删除列表标记 */
	border-top: 1px solid #dddddd; /* 这将为链接创建上边框 – 使用下边框将所有其它项放置在 LI 中 */
	margin-bottom: 12px; /* 这将在下面内容的导航之间创建间距 */
}
ul.nav li {
	border-bottom: 1px solid #dddddd; /* 这将创建按钮间隔 */
	font-size: 12px;
}
ul.nav a, ul.nav a:visited { /* 对这些选择器进行分组可确保链接即使在访问之后也能保持其按钮外观 */
	padding: 5px 5px 5px 15px;
	display: block; /* 这将为链接赋予块属性，使其填满包含它的整个 LI。这样，整个区域都可以响应鼠标单击操作。 */
	text-decoration: none;
	background: #ffffff;
	color: #00192F;
	font-size: 12px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* 这将更改鼠标和键盘导航的背景和文本颜色 */
	background: #40A0C9;
	font-weight:bold;
	color: #FFF;
	font-size: 12px;
}

/* ~~ 脚注 ~~ */
.footer-grd {
	background: #999999;
	height:2px;
	position: relative;/* 这可以使 IE6 hasLayout 以正确方式进行清除 */
	clear: both; /* 此清除属性强制 .container 了解列的结束位置以及包含列的位置 */
}
.footer {
	padding: 6px 0;
	text-align:center;
	color: #FFF;
	background: #00192F;
	position: relative;/* 这可以使 IE6 hasLayout 以正确方式进行清除 */
	clear: both; /* 此清除属性强制 .container 了解列的结束位置以及包含列的位置 */
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/* ~~ 其它浮动/清除类 ~~ */
.fltrt {  /* 此类可用于在页面中使元素向右浮动。浮动元素必须位于其在页面上的相邻元素之前。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* 此类可用于在页面中使元素向左浮动。浮动元素必须位于其在页面上的相邻元素之前。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* 如果从 #container 中删除或移出了 #footer，则可以将此类放置在 <br /> 或空 div 中，作为 #container 内最后一个浮动 div 之后的最终元素 */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

table.main_table {
	border-width: 3px;
	border-spacing: 3px;
	border-style: none;
	border-color: gray;
	border-collapse: collapse;
	background-color: white;
}
table.main_table th {
	border-width: 6px;
	padding: 3px;
	border-style: none;
	border-color: #000;
	background-color: #000;
	border-top-right-radius: 5px;
	border-top-left-radius:5px;
	color: #FF0;
	font-size: 15px;
}
table.main_table td {
	border-width: 1px;
	padding: 3px;
	border-style: dotted;
	border-color: gray;
	background-color: #ffffff);
	text-overflow: ellipsis;
	color: #333;
	font-size: 12px;
	text-align: center;
}

#search-box {
	position:absolute;
	width:420px;
	height:80px;
	z-index:1;
	right: 10%;
	top: 25px;
	font-size: 12px;
}
/* blue */
.blue {
	color: #d9eef7;
	font-weight:bold;	
	height:22px;
	width:90px;	
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;	
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
	font-weight:bold;	
	height:22px;
	width:90px;	
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;	
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
	font-weight:bold;	
	color: #80bed6;
	height:22px;
	width:90px;	
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;	
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
.orange {
	color: #fef4e9;
	height:22px;
	width:90px;
	border: solid 1px #da7c0c;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	height:22px;
	width:90px;	
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	height:22px;
	width:90px;	
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

/* gray */
.gray {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
	color: #afafaf;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
	background: -moz-linear-gradient(top,  #575757,  #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}
/* white */
.white {
	height:22px;
	width:90px;
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

/* opsfree_link */
.opsfree_link {
	height:50px;
	width:260px;
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.opsfree_link:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.opsfree_link:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

/* red */
.red {
	color: #faddde;
	height:22px;
	width:240px;		
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
	background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
	height:22px;
	width:240px;	
	background: #b61318;
	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
	background: -moz-linear-gradient(top,  #c9151b,  #a11115);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
	height:22px;
	width:240px;	
	color: #de898c;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
	background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
.container .footer p {
	text-align: right;
}

.edit-avatar {
	float: left;
	width: 70%;
	background: #fff;
	padding-bottom: 10px;
	color: #000;
}
.avatar-log {
	margin:0px;
	padding: 0px 0;
	width: 30%;
	float: left;
	text-align: left;
	color: #000;
	font-size: 12px;
}

.log-header {
	color: #000;
	font-weight:bold;
}

.search_locate {
	width:200px;	
}

/*------------------------------------*\
	ACCORDION
\*------------------------------------*/
.accordion{
	width:95%;
	overflow:hidden;
	list-style:none;
	margin-bottom:3px;
}
.accordion li{
	float:left;
	width:20%;
	overflow:hidden;
	height:250px;
	-moz-transition:width 0.2s ease-out;
	-webkit-transition:width 0.2s ease-out;
	-o-transition:width 0.2s ease-out;
	transition:width 0.2s ease-out;
}
.accordion li:first-of-type{
	-moz-border-radius:3px 0 0 3px;
	-webkit-border-radius:3px 0 0 3px;
	-o-border-radius:3px 0 0 3px;
	border-radius:3px 0 0 3px;
}
.accordion li:last-of-type{
	-moz-border-radius:0 3px 3px 0;
	-webkit-border-radius:0 3px 3px 0;
	-o-border-radius:0 3px 3px 0;
	border-radius:0 3px 3px 0;
}
.accordion div{
	padding:5px;
	text-align: left;
}
.accordion:hover li{
	width:10%;
}
.accordion li:hover{
	width:60%;
}
.slide-01	{ background:#fff; color:#333; }
.slide-02	{ background:#E0E0D8; color:#333; }
.slide-03	{ background:#C1C2BB; color:#333; }
.slide-04	{ background:#E0E0D8; color:#333; }
.slide-05	{ background:#C1C2BB; color:#333; }
/*------------------------------------*\
	VERTICAL
\*------------------------------------*/
#vertical{
	width:95%;
	height:300px;
}
#vertical li{
	height:20%;
	width:100%;
	-moz-transition:height 0.2s ease-out;
	-webkit-transition:height 0.2s ease-out;
	-o-transition:height 0.2s ease-out;
	transition:height 0.2s ease-out;
}
#vertical li:first-of-type{
	-moz-border-radius:3px 3px 0 0;
	-webkit-border-radius:3px 3px 0 0;
	-o-border-radius:3px 3px 0 0;
	border-radius:3px 3px 0 0;
}
#vertical li:last-of-type{
	-moz-border-radius:0 0 3px 3px;
	-webkit-border-radius:0 0 3px 3px;
	-o-border-radius:0 0 3px 3px;
	border-radius:0 0 3px 3px;
}
#vertical:hover li{
	height:10%;
	width:100%;
}
#vertical li:hover{
	height:60%;
	width:100%;
}

/* Rating Style */
#star ul.star { LIST-STYLE: none; MARGIN: 0; PADDING: 0; WIDTH: 85px; HEIGHT: 20px; LEFT: 10px; TOP: -5px; POSITION: relative; FLOAT: left; BACKGROUND: url('images/stars.gif') repeat-x; CURSOR: pointer; }

#star li { PADDING: 0; MARGIN: 0; FLOAT: left; DISPLAY: block; WIDTH: 85px; HEIGHT: 20px; TEXT-DECORATION: none; text-indent: -9000px; Z-INDEX: 20; POSITION: absolute; PADDING: 0; }

#star li.curr { BACKGROUND: url('images/stars.gif') left 25px; FONT-SIZE: 1px; }

#star div.user { LEFT: 15px; POSITION: relative; FLOAT: left; FONT-SIZE: 13px; FONT-FAMILY: Arial; COLOR: #888;
span {
	font-weight: bold;
}

-->
</style>
<script type="text/javascript">
//提交表单事件
function checkhello()
{
	var objs=document.getElementById("alreadlist").options;
	for (i=0; i< objs.length; i++)
	{
		objs[i].selected=true;
	}
	return true;
}
</script>
<script type="text/javascript">
/**
　*动态的给左边的下拉列表创建选项
　*具体情况可以从数据库读取数据动态创建选项  alreadlist  nolist
　*/
$(function(){
　　$("#add").click(function(){
　　　　　　　if($("#alreadlist option:selected").length>0)
　　　　　　　{
　　　　　　　　　　　$("#alreadlist option:selected").each(function(){
　　　　　　　　　　　　　　$("#nolist").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
　　　　　　　　　　　　　　$(this).remove();　
　　　　　　　　　　　})
　　　　　　　}
　　　　　　　else
　　　　　　　{
　　　　　　　　　　　alert("请选择要删除的主机组！");
　　　　　　　}
　　　})
})
$(function(){
　　　　　　$("#delete").click(function(){
　　　　　　　　　　　if($("#nolist option:selected").length>0)
　　　　　　　　　　　{
　　　　　　　　　　　　　　　$("#nolist option:selected").each(function(){
　　　　　　　　　　　　　　　　　　　　　$("#alreadlist").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
　　　　　　　　　　　　　　　　　　　　　$(this).remove();　
　　　　　　　　　　　　　　　})
　　　　　　　　　　　}
　　　　　　　　　　　else
　　　　　　　　　　　{
　　　　　　　　　　　　　　　alert("请选择要添加的主机组！");
　　　　　　　　　　　}
　　　　　})
})
</script>


<script>
$(document).ready(function () {
	//定义表单提交前与提交后的处理方法及超时相关
	var options = {
				beforeSubmit:showRequest,
				success:showResponse,
				timeout:3000
			};
	$('#myform').submit(function() {     
	    // submit the form     
	    $(this).ajaxSubmit(options);     
	    // return false to prevent normal browser submit and page navigation     
	    return false; 
	});
});

function showRequest(formData, jqForm, options) {
	return true;
}
function showResponse(responseText, statusText, xhr, $form)  { 
	alert(responseText ); 
}

function ajaxAddOptions(url,target,text) {
	target.empty();target.empty();target.empty();target.empty();target.empty();

	$.getJSON(url,function(json){
		$(json).each(function(i) {
			var x = json[i];
			target.append("<option value='" + eval("x."+text)+"'>" + eval("x."+text)+"</option>");
		});
	});
}
function alreadyajax(){ 
	var key = $("#alreadysearch").val();
	ajaxAddOptions("/avatar/searhost/in/{{file_id}}/?key="+key, $("#alreadlist"), "hostgroup");  
} 
function noinajax(){ 
	var key = $("#nosearchvalue").val();
	ajaxAddOptions("/avatar/searhost/no/{{file_id}}/?key="+key, $("#nolist"), "hostgroup");  
} 

</script>

<div class="content">
  <div class="edit-avatar">
  <form action="/avatar/hostslot/{{file_id}}/" method="post" id="myform">
    <table border="0" align="center" cellpadding="2" cellspacing="2" class="main_table">
      <tr>
        <th colspan="3" scope="col">
        {{file_name}}
        <input type="hidden" id="myfileid" value="{{file_id}}">
          </th>
        </tr>
      <tr>
        <td colspan="3">设定快照与主机组的关联({% if oneservernum %} {{oneservernum}} {% else %} 0 {%endif%})</td>
      </tr>
      
      <tr>
      
      
      
      
        <td>和快照关联的主机组(<span id="alreadyvalue">{{alreadylistlength}}</span>)<br> 
        <input name="locate_linked" type="text" id="alreadysearch"  value="" class="search_locate"><input type="button" class="blue" onclick="alreadyajax()" style="width:30px;"  value="搜"><br>
        <select name="linked_nodegroups" id="alreadlist" size="15" multiple class="search_locate" style="width:250px;">
        {%  for obj in alreadylist  %}
        <option value="{{obj.hostgroup}}">{{obj.hostgroup}}</option>
		{% endfor %}
        </select>
        </td>
        
        <td> 
        <input class="white"  type="button" id="add" value="删除>>"/>
        <br>  <br>       
        <input class="white"  type="button" id="delete" value="<<添加" /> 
        </td>
          <td>OpsFree中未关联主机组(<span id="notvalue">{{nolistlength}}</span>)<br> 
          <input name="locate_unlinked" type="text" id="nosearchvalue" value="" class="search_locate"  ><input type="button" class="blue" style="width:30px;" onclick="noinajax()" value="搜"><br>
          <select name="unlinked_nodegroups" id="nolist" size="15" multiple class="search_locate" style="width:250px;">
          {%  for obj in notlist  %}
        	<option value="{{obj.hostgroup}}">{{obj.hostgroup}}</option>
		  {% endfor %}
          </select></td>
      </tr>
       <tr>
        <td colspan="3" style="text-algin:center">
        <input type="submit" class="white" value="保存关联" onclick="checkhello()"/>
        </td>
        </tr>
    </table>
</form>
  </div>


  
  <div class="avatar-log">
	<ul class="accordion" id="vertical">
		<li class="accordion">
			<div>
			<span class="log-header">修订记录</span>
			<img src="/site_media/images/doc_edit.png" alt="edit" width="16" height="16" align="absmiddle">
{% for objlog in svnlog %}
				<ul>{{objlog.author|enconvertch}}&nbsp;{{objlog.date}}&nbsp;r{{objlog.revision}}</ul>
			{% endfor %}
	</div>
	</li>
	<li class="slide-02">
<div>
			<span class="log-header">调用记录</span><img src="/site_media/images/sign-out.png" alt="sign-out" width="16" height="16" align="absmiddle">
 {%  for obj in historylist  %}
<ul><li>{{obj.clientip}}&nbsp;
{% if obj.filename %}
{{obj.filename}}
{%else%}
--
{%endif%}
&nbsp;{{obj.version}}</li></ul>
{% endfor %}
		</div>
	</li>
		<li class="slide-03">
			<div>
			  <span class="log-header">评价记录</span><img src="/site_media/images/spechbubble_2.png" alt="comment" width="16" height="16" align="absmiddle">
{%  for obj in scorelist  %}
<ul>{{obj.times}}&nbsp;{% if obj.a %}
{{obj.a}}
{%else%}
--
{%endif%}&nbsp;{{obj.score}}分</ul>
{% endfor %}
		  </div>
		</li>
		<li class="slide-04">
		<div>
			<span class="log-header">访问记录</span><img src="/site_media/images/eye_inv.png" alt="views" width="16" height="16" align="absmiddle">
{%  for obj in visitlist  %}
<ul>{{obj.times}}&nbsp;{% if obj.a %}
{{obj.a}}
{%else%}
--
{%endif%}</ul>
{% endfor %}
		  </div>
		</li>
		<li class="slide-05">
			<div>
			  <span class="log-header">关注用户</span><img src="/site_media/images/user_silhouette.png" alt="users" width="16" height="16" align="absmiddle">
{%  for obj in concerlist  %}
<ul>{% if obj.a %}
{{obj.a}}
{%else%}
--
{%endif%}</ul>
{% endfor %}
		  </div>
		</li>
	</ul>
  </div>
  </div>
{%endblock%}